import type { questionComponentType, QuestionRadioPropsType } from "@/utils/type"
import {  MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { Form, Input, Checkbox,Select, Space, Button } from "antd";

import  { useEffect } from "react";


type propsType = questionComponentType & {
  onChange: (value: QuestionRadioPropsType) => void
}

export default function RadioPropComponent(props: propsType) {
  const [form] = Form.useForm();
  const { title,options,value,isVertical } = props.props;

  const handleChange = () => {
    props.onChange(form.getFieldsValue())
  }


  useEffect(() => {
    form.setFieldsValue({ title,value,isVertical,options })
  }, [title,value,isVertical,form,options])
  return (
    <Form
      onValuesChange={handleChange}
      layout="vertical"
      initialValues={{ title,value,isVertical,options }}
      form={form}
      disabled={props.isLocked}
    >
      <Form.Item name="title" label="单选标题：" rules={[{ required: true, message: '请输入单选标题' }]}>
        <Input />
      </Form.Item>

      
       <Form.Item  label="选项：">
         <Form.List name="options">
          {(fields,{add,remove})=>(
            <>
            {fields.map(({key,name},index)=>{
              return (
                <Space key={key} align="baseline">
                  {/* 输入框 */}
                  <Form.Item name={[name,"label"]} rules={[{ required: true, message: '请输入选项' }]}>
                  <Input placeholder="请输入文字..."></Input>
                  </Form.Item>
                  {/* 删除按钮 */}
                  {index >1 && <MinusCircleOutlined onClick={() => remove(name)}/>}
                </Space>
                
              )
            })}
            {/* 添加选项 */}
            <Form.Item>
              <Button 
              type="link" onClick={() => add({ label: `选项${fields.length + 1 }`, value: '' })}
              block icon={<PlusOutlined />}
              >添加选项</Button>

            </Form.Item>
            </>
          )}
         </Form.List>
       </Form.Item>
     

      <Form.Item name="value"  label="默认值：">
       <Select value={value} options={options}></Select>
      </Form.Item>

      <Form.Item name="isVertical"  valuePropName="checked">
        <Checkbox>垂直排列</Checkbox>
      </Form.Item>
    </Form>
  )
}
